// 文件树
<template>
  <div class="file-tree">
    <!-- 顶部按钮 -->
    <TopMenuVue @menu-click="handleClick" @command="handleCommand" />

    <!-- 文件树 -->
    <el-scrollbar @click.stop="scrollbarClick" @contextmenu.stop>
      <FileTreeVue ref="fileTreeRef" />
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import TopMenuVue from "./components/TopMenu.vue";
import FileTreeVue from "./components/FileTree.vue";

// FileTreeRef
const fileTreeRef = ref(<InstanceType<typeof FileTreeVue> | null>null);

/**
 * 顶部菜单点击事件
 */
function handleClick(icon: string) {
  if (!fileTreeRef.value) return;
  fileTreeRef.value.menuClick(icon);
}

/**
 * 顶部菜单command事件响应
 */
function handleCommand(command: string) {
  if (!fileTreeRef.value) return;
  fileTreeRef.value.handleCommand(command);
}

/**
 * 滚动区域点击事件 - 取消文件树选中状态
 */
function scrollbarClick() {
  if (!fileTreeRef.value) return;
  // fileTreeRef.value.cancelNodeActive(); // 暂时取消单击外部取消选中的功能
}
</script>

<style lang="less" scoped>
.file-tree {
  height: 100%;
}
/* element 样式穿透 */
/deep/.el-scrollbar {
  height: calc(100% - 40px);
  width: 100%;
}
/deep/.el-empty {
  user-select: none;
}
</style>
